<script>
import { main } from '@/util/mixins'
import { mapState } from 'vuex'
import * as service from 'services/x-start/mgr/device'
export default {
  mixins: [main],
  data() {
    return {
      service,
      visible: false,
      url: null,
      line: null,
      item: {},
      page: {
        pageOffset: 100,
        pageNum: 1,
      },
    }
  },
  created() {},
  computed: {
    ...mapState({
      typeList: state => state.sportList,
    }),
  },
  methods: {
    sortChange(val) {
      // const { column, ...data } = val
      this.getList({ val })
    },
    pull(id, type) {
      service.pull(id, type).then(res => {
        this.$message.success('成功')
        this.getList()
      })
    },
    setLine(item) {
      let line = item.path
      if (line) {
        this.url = line
        this.line = item.line
        this.item = item
        this.visible = true
      } else {
        this.$message.warning('缺少播流地址')
      }
    },
    saveCoordinate({ line, file }) {
      this.$set(this.detailInfo, 'line', line)
      this.$set(this.detailInfo, 'file', file)
      this.visible = false
    },
    getMatch(id) {
      return (
        this.typeList.find(item => item.id == id) &&
        this.typeList.find(item => item.id == id).sportName
      )
    },
  },
}
</script>

<template lang="pug">
.device
  VideoRtmp(
    v-if="visible"
    :visible.sync="visible"
    id="my-video"
    :url="url"
    :line="line"
    :item="item"
    :isShowLine="false"
    :isCanLine="false"
    title="视频展示"
  )
  Template(ref="child")
    span(slot="title") 视频列表
    .list(slot="list")
      .item(v-for="item in tableData" @click="setLine(item)" :key="item.id")
        img.img(src="../../../assets/img/play.png")
        .name {{item.name}}
        .cover()
          .tag
            .name {{item.tag}}
          .time {{item.createTime|formatTime}}
</template>

<style lang="stylus" scoped>
.list
  display flex
  flex-wrap wrap
  .item
    cursor pointer
    width 25%
    margin-bottom 20px
    padding 10px
    position relative
    box-sizing border-box
    .img
      width 100%
      height 200px
      object-fit contain
      background #ededed
    >.name
      padding 10px 0
      text-align center
    .cover
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      z-index -10
      height auto
      color #fff
      text-align left
      background rgba(0, 0, 0, 0)
      transition all 0.3s ease-in-out
      .time
        position absolute
        bottom 5px
        right 5px
        font-size 14px
      .tag
        margin 5px
        .name
          font-size 16px
          margin-top 10px
    &:hover
      .cover
        z-index 10
        background rgba(0, 0, 0, 0.8)
        transition all 0.3s ease-in-out
@media screen and (max-width: 650px)
  .list
    display block
    .item
      width 100%
</style>